<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="14">
        <div style="padding:15px;">
          <el-button type="primary" icon="el-icon-folder-add" @click="newly()">新增</el-button>
        </div>
      </el-col>
      <el-col :span="1.5" style="padding-top:23px;">
        <span>名称：</span>
      </el-col>
      <el-col :span="4" style="padding-top:15px;">
        <!-- <el-input v-model="ininput" placeholder="请输入餐桌号"></el-input> -->
        <el-input v-model="consumablesType" placeholder="请输入名称"></el-input>
      </el-col>
      <el-col :span="4">
        <div style="padding:15px;">
          <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      v-show="typepagingshow"

      :data="currentData"
      border
      :header-cell-style="this.$store.state.headerCssObj"
      :cell-style="this.$store.state.cellCssObj"
    >
      <!-- <el-table-column prop label="商品名"></el-table-column> -->
      <el-table-column prop="goodsClassifyName" label="商品类型"></el-table-column>
      <!-- <el-table-column prop label="单位"></el-table-column> -->
      <!-- <el-table-column prop label="库存"></el-table-column> -->
      <!-- <el-table-column prop label="供应商"></el-table-column> -->
      <!-- <el-table-column prop="createBy" label="创建人"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="updateBy" label="更新人"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>-->
      <el-table-column prop="delFlag.label" label="状态"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center; padding-top:20px">
      <paging :obj="pagingData"></paging>
    </div>
    <div v-show="typesearchshow">
      <el-table

        :data="currentData1"
        border
        :header-cell-style="this.$store.state.headerCssObj"
        :cell-style="this.$store.state.cellCssObj"
      >
        <!-- <el-table-column prop label="商品名"></el-table-column> -->
        <el-table-column prop="goodsClassifyName" label="商品类型"></el-table-column>
        <!-- <el-table-column prop label="单位"></el-table-column> -->
        <!-- <el-table-column prop label="库存"></el-table-column> -->
        <!-- <el-table-column prop label="供应商"></el-table-column> -->
        <!-- <el-table-column prop="createBy" label="创建人"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="updateBy" label="更新人"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>-->
        <el-table-column prop="delFlag.label" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; padding-top:20px">
        <paging :obj="searchpagingData"></paging>
      </div>
    </div>

    <el-dialog title="新增消耗品类型" :visible.sync="dialogVisible" width="30%" center>
      <div style="padding:20px;text-align:center;">
        <span>类型名：</span>
        <el-input v-model="typeadd" style="width:200px;"></el-input>
      </div>
      <div style="padding:20px;text-align:center; ">
        <el-button type="primary" @click="addTypeEnsure()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改消耗品类型" :visible.sync="dialogVisibleChange" width="30%" center>
      <div style="padding:20px;text-align:center;">
        <span>类型名：</span>
        <el-input v-model="typechange" style="width:200px;"></el-input>
      </div>
      <div style="padding:20px;text-align:center; ">
        <el-button type="primary" @click="addTypeEnsureChange()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="确认删除" :visible.sync="dialogVisibleDelete" width="30%" center>
      <div style="padding:10px;text-align:center; float:left;padding-left:130px;">
        <el-button type="primary" @click="typeEnsureDelete()">确定</el-button>
      </div>
      <div style="padding:10px;text-align:center;">
        <el-button type="primary" @click="typeCancelDelete()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from "vuex";
export default {
  name: "consumablesTypePage",
  data() {
    return {
      typeID: "",
      consumablesType: "",
      typeadd: "",
      typechange: "",
      // addTypeShow:false,
      typesearchshow: false,
      typepagingshow: true,
      dialogVisibleDelete: false,
      dialogVisible: false,

      dialogVisibleChange: false,

      dialogVisibleChange: false,

      // currentData: [
      //   {
      //     type: "肉",
      //     creator: "张三",
      //     creationTime: "3-29",
      //     updateOne: "张三",
      //     updateTime: "3-30"
      //   },
      //   {
      //     type: "肉",
      //     creator: "张三",
      //     creationTime: "3-29",
      //     updateOne: "张三",
      //     updateTime: "3-30"
      //   }
      // ]

    };
  },
  mounted() {
    let obj= {
      currentPage:1,
      pageSize:5
    };
    this.postTypePagingData(obj)
  },
  mounted() {
    let obj = {
      currentPage: 1,
      pageSize: 5
    };
    this.postTypePagingData(obj);
  },
  methods: {
    ...mapActions("consumablesTypeStore", [
      "postTypeSearchData",
      "postTypeAddData",
      "postTypeChangeData",
      "postTypeDeleteData",
      "postTypePagingData"
    ]),
    search() {
      if (this.consumablesType === "") {
        alert("请输入名称");
      } else {
        this.typesearchshow = true;
        this.typepagingshow = false;
        let obj = {
          goodsClassifyName: this.consumablesType,
          currentPage: 1,
          pageSize: 5

        };
        this.postTypeSearchData(obj);
      }
    },
    addTypeEnsure() {
      // this.typesearchshow = false;
      // this.typepagingshow = true;
      this.dialogVisible = false;
      let obj = {
        goodsClassifyName: this.typeadd
      };
      this.postTypeAddData(obj);
    },
    newly() {
      this.dialogVisible = true;
    },
    handleEdit(edit) {
      console.log(edit);
      this.dialogVisibleChange = true;
      this.typeID = edit.goodsTypeId;
    },
    addTypeEnsureChange() {
      this.dialogVisibleChange = false;
      let obj = {
        goodsTypeId: this.typeID,
        goodsClassifyName: this.typechange
      };
      this.postTypeChangeData(obj);
    },
    handleDelete(del) {
      this.dialogVisibleDelete = true;
      console.log(del);
      this.typeID = del.goodsTypeId;
    },
    typeEnsureDelete() {
      this.dialogVisibleDelete = false;
      let obj = {
        goodsTypeId: this.typeID
      };
      this.postTypeDeleteData(obj);
    },
    typeCancelDelete() {
      this.dialogVisibleDelete = false;
    }
  },
  created() {
    // this.postTypeSearchData();
    // this.postTypeAddData();
    // this.postTypeChangeData();
    // this.postTypeDeleteData();
    // this.postTypePagingData();
  },
  computed: {
    ...mapGetters("consumablesTypeStore", [
      "getstoreTypePagingData",
      "getstoreTypeDeleteData",
      "getstoreTypeChangeData",
      "getstoreTypeAddData",
      "getstoreTypeSearchData",
      "getPageCount"

    ]),
    ...mapState({
      // pageTypeSearchData: function(state) {
      //   return state.consumablesTypeStore.postTypeSearchsData;
      // },
      // pageTypeAddData: function(state) {
      //   return state.consumablesTypeStore.postTypeAddsData;
      // },
      // pageTypeChangeData: function(state) {
      //   return state.consumablesTypeStore.postTypeChangesData;
      // },
      // pageTypeDeleteData: function(state) {
      //   return state.consumablesTypeStore.postTypeDeletesData;
      // },
      // pageTypePagingData: function(state) {
      //   return state.consumablesTypeStore.postTypePagingsData;
      // }
    }),
    pagingData() {
      var that = this;
      let data = {
        pageSize: 3, //一页展示几条数据
        pagerCount: 5, //超过多少页打点省略
        currentChange(num) {
          that.currentPage = num; //改变当前页
          let obj = {
            currentPage: num,
            pageSize: 5
          };
          that.postTypePagingData(obj);
        },
        pageCount: this.pageSize //一共有几条数据
      };
      return data;
    },
    searchpagingData(){
      var that = this;
      let data = {
        pageSize: 3, //一页展示几条数据
        pagerCount: 5, //超过多少页打点省略
        currentChange(num) {
          that.currentPage = num; //改变当前页
          let obj = {
            goodsClassifyName: this.consumablesType,
          currentPage: 1,
          pageSize: 5
          };
          that.postTypeSearchData(obj);
        },
        pageCount: this.pageSize //一共有几条数据
          };
          return data;
        },
    // 渲染真实数据
    currentData1(){
      return this.getstoreTypeSearchData;
    },
    currentData(){
      return this.getstoreTypeAddData;
    },
    currentData(){
      return this.getstoreTypeChangeData;
    },
    currentData(){
      return this.getstoreTypeDeleteData;
    },
    currentData(){
      // return this.pageTypePagingData
      return this.getstoreTypePagingData;
    },
    pageSize(){
      return this.getPageCount;
    }
  }
};
</script>

<style scoped>
/* .addType {
  width: 800px;
  height: 300px;
  background-color: #f0f0f0;
  position: relative;
  top: -200px;
  z-index: 1;
  left: 360px;
  text-align: center;
} */
</style>